<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>珠峰培训-QQ音乐播放器</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/prefixfree.min.js" async></script>
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header class="header-box">
            <div class="base">
                <!-- <div class="cover">
                    <img src="" alt="">
                </div>
                <div class="info">
                    <h2 class="title">我的梦 - 华为手机主题曲</h2>
                    <h3 class="author">张靓颖</h3>
                </div> -->
            </div>
            <a href="javascript:;" class="player-button"></a>
        </header>

        <!-- 歌词 -->
        <main class="main-box">
            <div class="wrapper">
                <!-- <p class="active">我的梦 (华为手机主题曲) - 张靓颖</p>
                <p>词：王海涛/张靓颖</p>
                <p>曲：Andy Love</p> -->
            </div>
        </main>

        <!-- 尾部 -->
        <footer class="footer-box">
            <div class="bar">
                <span class="time current">00:00</span>
                <div class="progress">
                    <div class="already"></div>
                </div>
                <span class="time duration">00:00</span>
            </div>
            <a href="#" class="download">下载这首音乐</a>
        </footer>

        <!-- 其它 -->
        <div class="mark-image"></div>
        <div class="mark-overlay"></div>
        <div class="loading-box">
            <div class="content">
                <img src="images/loading.gif" alt="">
                <span>奴家正在努力加载中...</span>
            </div>
        </div>
        <audio src="" id="audioBox" preload="metadata"></audio>
    </div>

    <!-- IMPORT JS -->
    <script>
        (function () {
            const app = document.querySelector('#app'),
                HTML = document.documentElement
            const computed = function computed() {
                let orien = Math.abs(window.orientation)
                if (orien === 90) {
                    // 切换到横屏
                    alert('横屏体验不佳，请您切换到竖屏')
                    app.style.display = 'none'
                    return
                }
                // 当前是竖屏
                app.style.display = 'block'

                // 计算REM的换算比例
                let deviceW = HTML.clientWidth,
                    designW = 375,
                    initialRatio = 100
                if (deviceW > 540) deviceW = 540
                let currentRatio = deviceW / designW * initialRatio
                HTML.style.fontSize = currentRatio + 'px'
            }
            computed()
            window.addEventListener('resize', computed)
            // 基于 resize 代替 orientationchange 事件：这样可以适配模拟器中，设备的切换场景
        })();
    </script>
    <script src="js/api.js"></script>
    <script src="js/fastclick.js"></script>
    <script src="js/index.js"></script>
</body>

</html>